<template>
  <div id="wrap">
    <div style="float: left">
      <img src="./404.png" alt="404.life" width="910" />
    </div>
    <div class="text">
      <p style="color: #0086f0; font-size: 26px; margin-bottom: 6px">很抱歉</p>
      <p style="color: #0086f0; font-size: 22px; margin-bottom: 20px">
        您访问的页面出现错误了
      </p>
      <span @click="backUp()" class="link">返回上一级</span>
      <span @click="backHome()" class="link">返回首页</span>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    backHome() {
      this.$router.push({ name: "home" });
    },
    backUp() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
#wrap .link {
  color: #f68c22;
  font-size: 22px;
  margin-right: 15px;
  cursor: pointer;
}
#wrap .link:hover {
  border-bottom: 1px solid #f68c22;
}
@media screen and (min-width: 768px) {
  #wrap {
    width: 1180px;
    height: 407px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -224px;
    margin-left: -590px;
    display: flex;
    align-items: center;
  }

  #wrap .text {
    float: right;
    position: relative;
    left: -125px;
    top: 10px;
  }
}
@media screen and (min-width: 320px) and (max-width: 767px) {
  html,
  body {
    height: 100%;
  }
  body {
    display: flex;
    align-items: center;
  }

  #wrap,
  #wrap img {
    width: 100%;
    margin-bottom: 60px;
  }

  #wrap .text {
    text-align: center;
  }
}
</style>